<template>
  <div class="h_wrapper flex">
    <el-tabs tab-position="left" class="tabpostion" v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="收益看板" name="1">
        <div class="sy_body">
          <Earnings v-if="activeName == '1'" :plateId="active" />
        </div>
      </el-tab-pane>
      <el-tab-pane label="广告位数据" name="2">
        <AdvData v-if="activeName == '2'" :plateId="active" />
      </el-tab-pane>
      <el-tab-pane label="广告位管理" name="3">
        <AdvPosition v-if="activeName == '3'" :plateId="active" />
      </el-tab-pane>
      <el-tab-pane label="财务管理" name="4">
        <Finance v-if="activeName == '4'" :plateId="active" />
      </el-tab-pane>
      <el-tab-pane label="优惠活动管理" name="5">
        <Favorable v-if="activeName == '5'" :plateId="active" />
      </el-tab-pane>
    </el-tabs>
    <!-- <div class="flow_left bg_fff">
      <div
        v-for="(item, index) in plantList"
        :key="index"
        class="f_item f-14 commhover"
        :class="{ active: active == item.id }"
        @click="changeItem(item)"
      >
        {{ item.name }}
      </div>
    </div>
    <div class="flowcontent" :key="keys">
      <div class="fc_content">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="收益看板" name="1">
            <Earnings v-if="activeName == '1'" :plateId="active" />
          </el-tab-pane>
          <el-tab-pane label="广告位数据" name="2">
            <AdvData v-if="activeName == '2'" :plateId="active" />
          </el-tab-pane>
          <el-tab-pane label="广告位管理" name="3">
            <AdvPosition v-if="activeName == '3'" :plateId="active" />
          </el-tab-pane>
          <el-tab-pane label="财务管理" name="4">
            <Finance v-if="activeName == '4'" :plateId="active" />
          </el-tab-pane>
          <el-tab-pane label="优惠活动管理" name="5">
            <Favorable v-if="activeName == '5'" :plateId="active" />
          </el-tab-pane>
        </el-tabs>
      </div>
    </div> -->
  </div>
</template>

<script>
import AdvPosition from "./advposition/home.vue";
import Earnings from "./earnings/index.vue";
import AdvData from "./advdata/index.vue";
import Finance from "./finance/index.vue";
import Favorable from './favorable/index'
export default {
  name: "advflowmain",
  data() {
    return {
      active: 1,
      plantList: [],
      activeName: "1",
      keys: "",
    };
  },
  components: {
    AdvPosition,
    Earnings,
    AdvData,
    Finance,
    Favorable
  },
  created() {
    this.getDicts("/manager/api/getPlateList").then((res) => {
      this.plantList = [{ id: 0, name: "全部" }].concat(res.data);
    });
  },
  methods: {
    changeItem(item) {
      this.active = item.id;
      this.keys = Date.now();
    },

    handleClick() {},
  },
};
</script>

<style lang="scss" scoped>
.h_wrapper {
  width: 100%;
  height: calc(100vh - 60px);
}

.tabpostion{
  width: 100%;
  ::v-deep .el-tabs__header{
    width: 150px;
    background-color: #fff;
  }
  ::v-deep .el-tabs__nav-wrap::after{
    background-color: #fff;
  }
  ::v-deep .el-tabs__active-bar{
    background-color:#fff
  }
  ::v-deep .el-tabs__item{
    text-align: left;
    height: 46px;
  }
}

.flow_left {
  width: 150px;
  height: 100%;
  padding: 0 6px;
  position: fixed;
  top:0;
  bottom: 0;
  left: 0;
  padding-top: 56px;
}
.f_item {
  margin-top: 6px;
  height: 42px;
  line-height: 42px;
  padding: 0 20px;
  border-radius: 4px;

  &.active {
    background-color: #ebf3ff;
  }
}
.flowcontent {
  position: fixed;
  left: 150px;
  right: 0;
  height: calc(100vh - 60px);
  //   padding-left: 150px;
  //   width: 100%;
}
.fc_content {
  padding: 16px 16px 0 16px;
  ::v-deep .el-tabs__header {
    background-color: #fff;
    padding-left: 10px;
  }
  ::v-deep .el-tabs__item {
    height: 46px;
    line-height: 46px;
  }
  ::v-deep .el-tabs__nav-wrap::after {
    background-color: #fff;
  }

  ::v-deep .el-tabs__item.is-active {
    color: #000;
  }
}
</style>
